@import './_variables.scss';
@import './_fonts.scss';
@import './_shared.scss';

body {
	color: black;
}

nav {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
}

.wrapper {
	font-family: var(--font-text);

	p, ul, ol {
		font-size: 1.4rem;
	}

	.subtitle {
		font-size: 1.3rem;
	}
	
	code {
		display: block;
		font-size: 1.2rem;
		font-family: inherit;
		font-weight: 400;
		border: 4px solid #5b5b5b;
		padding: 20px 30px;
		width: 65%;
		margin: auto;
	}
	
	img {
		width: 100%;
		margin: auto;
		height: auto;
	}
	
	p,
	ul {
		font-size: 1rem;
		font-weight: 300;
	}
	
	.step-number {
		font-size: 1rem;
		margin: 0;
		color: #7a7a7a;
	}
	
	h2 {
		font-weight: normal;
		font-size: 1.5rem;
		margin: 4px 0 0 0;
		color: #399F6E;
	}
	
	li {
		line-height: 1.5em;
	}

	h1 {
		margin-top:0;
	}
	
	.inner {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 5vh;
	}
	
	.heading-outer {
		padding: 150px 0 7vh;
		width: 100%;
		margin: 0;
		color: black;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.sprig-image {
		width: 100%;
		margin: 0 0 0 auto;
		padding: 0;
		object-fit: contain;
		image-rendering: pixelated;
	}
	
	a:not(:has(.btn)) {
		&:hover {
			text-decoration: underline;
		}
	}

	.heading-inner {
		margin: 0;
		width: 100%;
	}
	
	.step {
		display: grid;
		grid-template-columns: 1fr;
		margin-bottom: 7vh;
		line-height: 1.5;
		border: 4px solid var(--accent);
		background: var(--bg-surface);
		padding: 25px;
	}
	
	.bottom-cta {
		display: block;
		margin: 0 auto;
		width: fit-content;
	}
	
	@media (min-width: $breakpoint-1) {
		h1 {
			font-size: 42px;
		}
	
		img {
			width: 80%;
		}

		.sprig-image {
			height: auto;
			max-width: 40%;
		}

		.heading-outer {
			justify-content: space-between;
			align-items: stretch;
			flex-direction: row;
			padding-left: 13px;
			padding-right: 13px;
		}

		.step {
			padding: 40px;
		}

		.inner {
			width: 75%;
		}

		.heading-inner {
			width: 50%;
		}

		.step {
			grid-template-columns: 0.8fr 1.2fr;
		}
	
		@media (min-width: $breakpoint-2) {
			h1 {
				font-size: 54px;
			}

			.sprig-image {
				height: 300px;
				padding-left: 30px;
			}
		}
	}
}
